<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0,
		maximum-scale=1.0, user-scalable=no"/>
    <meta name="misapplication-tap-highlight" content="no"/>
    <meta name="HandheldFriendly" content="true"/>
    <meta name="MobileOptimized" content="320"/>
    <title>Hello H5+</title>
    <script type="text/javascript" src="js/update.js"></script>
    <script type="text/javascript" charset="utf-8">
		//取消浏览器的所有事件，使得active的样式在手机上正常生效
		document.addEventListener('touchstart', function() {
			return false;
		}, true);
		// 禁止选择
		document.oncontextmenu = function() {
			return false;
		};

		// H5 plus事件处理
		var as = 'pop-in'; // 默认窗口动画
		function plusReady() {
			// 隐藏滚动条
			plus.webview.currentWebview().setStyle({
				scrollIndicator: 'none'
			});
			// Android处理返回键
			plus.key.addEventListener('backbutton', function() {
				if (confirm('确认退出？')) {
					plus.runtime.quit();
				}
			}, false);
			compatibleAdjust();
		}
		if (window.plus) {
			plusReady();
		} else {
			document.addEventListener('plusready', plusReady, false);
		}

		// DOMContentLoaded事件处理
		var _domReady = false;
		document.addEventListener('DOMContentLoaded', function() {
			_domReady = true;
			compatibleAdjust();
		}, false);

		// 兼容性样式调整
		var _adjust = false;

		function compatibleAdjust() {
			if (_adjust || !window.plus || !_domReady) {
				return;
			}
			_adjust = true;
			// iOS平台使用div的滚动条
			if ('iOS' == plus.os.name) {
				document.getElementById('content').className = 'scontent';
			}
			// 预创建二级窗口
			//	preateWebviews();
			// 关闭启动界面
		}

		// 处理点击事件
		var _openw = null;

		function clicked(id, a, s) {
			if (_openw) {
				return;
			}
			a || (a = as);
			_openw = preate[id];
			if (_openw) {
				_openw.showded = true;
				_openw.show(a, null, function() {
					_openw = null; //避免快速点击打开多个页面
				});
			} else {
				//var wa=plus.nativeUI.showWaiting();
				_openw = plus.webview.create(id, id, {
					scrollIndicator: 'none',
					scalable: false,
					popGesture: 'hide'
				}, {
					preate: true
				});
				preate[id] = _openw;
				_openw.addEventListener('loaded', function() { //叶面加载完成后才显示
					//setTimeout(function() {//延后显示可避免低端机上动画时白屏
					//wa.close();
					_openw.showded = true;
					s || _openw.show(a, null, function() {
						_openw = null; //避免快速点击打开多个页面
					});
					s && (_openw = null); //避免s模式下变量无法重置
					//},10);
				}, false);

				_openw.addEventListener('close', function() { //页面关闭后可再次打开
					_openw = null;
					preate[id] && (preate[id] = null); //兼容窗口的关闭
				}, false);
			}
		}

		// 预创建二级页面
		var preate = {};

		function preateWebviews() {
			var plist = document.getElementById('plist').children;
			// 由于启动是预创建过多Webview窗口会消耗较长的时间，所以这里限制仅创建5个
			for (var i = 0; i < plist.length && i < 2; i++) {
				var id = plist[i].id;
				id && (id.length > 0) && preateWebivew(id);
			}
		}

		function preateWebivew(id) {
			if (!preate[id]) {
				var w = plus.webview.create(id, id, {
					scrollIndicator: 'none',
					scalable: false,
					popGesture: 'hide'
				}, {
					preate: true
				});
				preate[id] = w;
				w.addEventListener('close', function() { //页面关闭后可再次打开
					_openw = null;
					preate[id] && (preate[id] = null); //兼容窗口的关闭
				}, false);
			}
		}

		// 清除预创建页面(仅)
		function preateClear() {
			for (var p in preate) {
				var w = preate[p];
				if (w && w.showded && !w.isVisible()) {
					w.close();
					preate[p] = null;
				}
			}
		}

    </script>
    <link rel="stylesheet" href="css/common.css" type="text/css" charset="utf-8"/>
    <style type="text/css">
		li {
			padding: 0.8em;
			border-bottom: 1px solid #eaeaea;
		}

		li:active {
			background: #f4f4f4;
		}

		.iabout {
			background: no-repeat center center url();
			background-size: 50px 44px;
		}

		.item {
			display: block;
			background: no-repeat right center url();
			background-size: 12px 22px;
			-ms-touch-action: auto;
		}

		.chs {
			font-size: 0.8em;
			color: #838383;
		}

    </style>
</head>

<body onselectstart="return false;">
<header>
    <div style="width:15%; height:100%; float:left;"></div>
    <div class="nvtt">Hello HTML5+</div>
    <div class="nvbt iabout" onclick="clicked('about.html','zoom-fade-out',true);"></div>
</header>
<div id="content" class="content">
    <ul id="plist" style="list-style:none; margin:0; padding:0; text-align:left;">
        <li id="plus/push.html" onclick="clicked(this.id);">
				<span class="item">Push
					<div class="chs">消息推送</div>
				</span>
        </li>
    </ul>
</div>
</body>

</html>
